<script setup>
import MyTree from "@c/myTree/MyTree.vue";
import { computed, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
    const props = defineProps({
        bar: {
            type: Object,
        },
        pack: {
            type: Boolean,
            default: false
        }
    });
    const showSon = ref(false);
    let router = useRouter()
    const toggleShowSon = function() {
        showSon.value = !showSon.value;
    }
    const click = function() {
        // 如果没有儿子节点那么展示儿子节点否则跳转
        if(props.bar.son.length) {
            showSon.value = !showSon.value;
        } else {
            router.push(props.bar.to);
        }
    }

    import getEventBus from "@utils/eventBus.js";
    import {TAGCHANGE} from "@utils/myConst.js";
    const eb = getEventBus();
    const tagCheck = function(tagName) {
        if(props.bar.son.length)return ;
        eb.emit(TAGCHANGE,`MyTree$${tagName}`,tagName);
    }   


    const select = computed(()=>props.bar.select);



</script>
 
<template>
    <div class="myTree-main-container" :class="{active:select}">
        <div class="myTree-self-container" @click="tagCheck(bar.name);click();">
            <div class="myTree-icon-container">
                <Licon v-if="bar.icon" :name="bar.icon"></Licon>
            </div>
            <div class="myTree-name-container" v-if="!pack">{{bar.name}}</div>
            <div class="myTree-icon-arrow" v-if="bar.son.length && !pack" >
                <Licon :name="showSon?`arrowUp`:`arrowDown`"></Licon>
            </div>
        </div>
        <transition name="menu">
            <div class="myTree-son-container" v-if="showSon && !pack">
                <MyTree v-for="item in bar.son" :key="item" :bar="item"></MyTree>
            </div>
        </transition>
    </div>
</template>


<style lang="scss" scoped>
    @import "@scss/myTree/myTree.scss";
</style>